<template>
<!--<div>工资管理</div>-->
  <div>
    <Card shadow>
      <Button type="primary" @click="addEmployee">添加</Button>&ensp;
      <Button type="error" @click="deleteAll">批量删除</Button>&ensp;
      <Table ref="dataTable" highlight-row :columns="columns"
             resizeable=true :data="data" :loading="loading"
             row-key="id" select
             border height="400">

      </Table>
    </Card>
  </div>
</template>

<script>
import {getAllEmployeeByPageAndSize} from "@/api/data";

export default {
  name: "SalaryManagement",
  data() {
    return {
      searchKey: '',
      loading: true,
      pageIndex: 1,
      pageSize: 10,
      dataSize: 0,
      data: [],
      columns: [{
        type: 'selection',
        width: 60,
        search:false,
        align: 'center'
      },
        {
          title: '员工号',
          key: 'code',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '用户名',
          key: 'username',
          render:(h, params) => {
            return h('span',params.row.user.username)
          }
        },
        {
          title: '角色',
          key: 'role',
          render:(h, params) => {
            return h('span',params.row.role.roleName)
          }
        },
        {
          title: '状态', key: 'status', sortable: false,
          render: (h, params) => {
            const row = this.getStatus(params.row.user.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          }
        },
        {
          title: '创建时间',
          key: 'createTime',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '修改时间',
          key: 'updateTime',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '操作',
          key: 'handle',
          render:(h,params)=>{
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateUser(params)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: params.row.isDel?'warning':'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteUser(params)
                  }
                }
              },  params.row.isDel==='DELETE'?'恢复':'删除')
            ]);
          }
        }
      ]
    }
  },
  methods: {
    changePage(page) {
      this.pageIndex = page;
      this.getData();
    },
    changeSize(size) {
      this.pageSize = size;
      this.getData();
    },
    getData() {
      this.loading = true
      getAllEmployeeByPageAndSize(this.pageIndex, this.pageSize).then(data => {
        if (data.data.code !== 200 || !data.data.object.content) {
          this.$Message.error(data.data.message);
        } else {
          this.data = data.data.object.content;
          this.dataSize = data.data.object.totalElements;
        }
        this.loading = false
      });
    },
    addEmployee(){

    },
    deleteAll(){

    },
    getStatus(val) {
      switch (val) {
        case "Enable":
          return {code: 200, value: '启用', color: 'primary'}
        case "Disable":
          return {code: 500, value: '禁用', color: 'purple'}
        case "Delete":
          return {code: 404, value: '删除', color: 'error'}
        case "Lock":
          return {code: 400, value: '锁定', color: 'warning'}
        case "Unlock":
          return {code: 402, value: '解除锁定', color: 'blue'}
        case "NoPassWord":
          return {code: 308, value: '密码过期', color: 'red'}
        default:
          return {code: 0, value: '未知状态'}
      }
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>

</style>
